<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<style>
			/*1.控制字体: font-family指定字体家族属性 */
			*{
			     /*免费:微软雅黑、楷体、 sans-serif‘无衬线字体’等同于黑体、宋体..*/ 
				 font-family:微软雅黑,sans-serif;
			/*用户电脑存在字体，按照顺序选择执行，二选一，就近原则*/
			/*font-size字体尺寸属性：px：绝对值--PC  em：相对于父元素字体倍数调整--移动*/
			font-size:1.5em;
			/*font-weight字体加粗属性  属性值：数值【整数】 100-900
			                                 英文  normal=400,bold=900*/
			font-weight: 900;
			/*font-style字体样式属性*/ 
			font-style: italic;
			/*text-transform字体转换属性:属性值uppercase 转大写
			                                 lowercase 转小写
			                                 capitalize 首字符转大写
			*/
			text-transform: uppercase; 
			text-transform: lowercase;
			text-transform: capitalize; I
			/*text-indent文本块首行缩进属性:	属性值	数值px*/
			text-indent: 200px;
			}			
			/*2.控制文本布局*/
			h1+p{
				border: 1px solid red;
				/*text-align文本对齐属性：属性值：left/right/center
				                                justify 两端对齐【文本占满空间】
			                                    左右布局*/
				text-align: center;
				text-align: justify;
				/*line-height行高属性：属性值：数值px  针对文本行高*/
				height: 40px;
				line-height: 40px;
				/*文本垂直居中：高度与行高一致*/
				/*letter-spacing字符间距属性：属性值【正负】数值px*/
				letter-spacing: 10px;
				/*word-spacing单词间距属性：属性值【正负】数值px*/
				word-spacing: 10px;
				/*文本装饰效果*/
				p a{
					border: 1px solid #6d6d6d;
					padding: 6px 10px;
					border-radius: 3px;
					margin-left: 10px;
				}
				/*默认效果：去边框，下划线去掉*/
				p a.current{
					border: 0;
					/*text-decoration超链接效果属性：属性值 none 去掉下划线
					                                   underline默认有下划线
													   line-through删除线
					
					*/
					text-decoration:none ;
					text-decoration: underline;
					text-decoration: line-through;
					color: #000;
				}
				p>span{
					bord er:1px solid red;
					/*text-shadow文本阴影属性   阴影：①滤镜：下阴影②文本阴影③盒子阴影*/
					/*     属性值：X  Y  模糊距离*/
					text-shadow: 5px 5px 5px #0055ff;
				}
				/*4.文本换行属性*/
				h1~span{
					border: 1px solid red;
					/*white-space文本换行属性：nowrap
					                          pre
											  normal
					*/
					white-space: nowrap;
					white-space: pre;
					white-space: normal;
				}			 
		</style>
	</head>
	<body>
		<!--文本格式化属性：针对文本和字体，四种效果：
		①控制字体：font-family，font-size，font-weight等
		②控制文本布局：text-align，line-height，letter-spacing等
		③文本装饰效果：text-decoration，text-shadow等
		④文本溢出和换行：overflow，white-space
		-->
		<h1>文本格式化属性：控制字体</h1>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, ut. Sed repellendus at expedita asperiores dolores magni ut et vel impedit! Rem quaerat quis cum exercitationem molestiae pariatur odio nobis!
		<h1>控制文本布局：文本</h1>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus magni tempora perferendis. Modi aliquid minus ipsum voluptatibus corporis id, sed explicabo enim tenetur, veniam doloribus. Fugit aperiam repudiandae nihil aliquam!</p>
		<h1>文本装饰效果</h1>
		<p>
			<a href="#" class="current">1</a>
			<a href="#">2</a>
			<a href="#">3</a>
			<a href="#">4</a>
			<a href="#">5</a>
			<a href="#">6</a>
			<span>测试文本阴影</span>
		</p>
		<h1>文本换行属性</h1>
		<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius nam eligendi nobis maiores. Quibusdam, voluptate magnam. Totam sapiente ullam rem accusamus aut. Fuga doloribus nulla vero voluptas molestiae, distinctio sequi.
	</body>
</html>